<template>
     <li class="item-content">
        <div class="item-inner">
            <div class="item-title">
                {{ item.displaycon }}
            </div>
            <div class="item-after">
                <label class="label-switch">
                    <input type="checkbox" @change="onInput">
                    <div class="checkbox"></div>
                </label>
            </div>
        </div>
    </li>
</template>

<script type="text/javascript">
    import store from '../store/index'
    export default {
        name: "list-input",
        data() {
            return {
                msg: this.item.displaycon
            }
        },
        props: {
            item: {
                type: Object,
                default: function() {
                    return {
                        placeholder: '请输入信息',
                        displaycon: '是否设置',
                    }
                }
            },
            nextState: {
                type: Object,
                default: function() {
                    return {
                        key: 'name',
                        pageName: 'forum-page',
                        dispatch: 'myCurrentPosition'
                    }
                }
            }
        },
        methods: {
            onInput(ev) {
                const vm = this
                vm.msg = $$(event.target.tagName).val() //保留原始输入值
                if (vm.msg) store.dispatch(vm.nextState.dispatch, {
                    [vm.item.key]: vm.msg
                })
            }
        },
        mounted() {
            const vm = this
            if (vm.item.key == 'sex') {
                var pickerDevice = myApp.picker({
                    input: '#picker-device',
                    cols: [{
                        textAlign: 'center',
                        values: ['男', '女'],
                        displayValues: ['男', '女']
                    }],
                    onChange: function(picker, values, displayValues) {
                        console.log(picker, values, displayValues)
                        const val = (values == '男') ? true : false
                        store.dispatch(vm.nextState.dispatch, {
                            [vm.item.key]: val
                        })
                    }
                });
            }
        },
        computed: {
            limit() {
                return (this.msg ? this.msg.length : 0)
            }
        }

    }
</script>